<template>
  <a-modal
    width="50%"
    :title="title"
    :visible="visible"
    @ok="handleOK"
    @cancel="handleCancel"
  >
    <a-row class="input-sreach" :gutter="16">
      <a-col :span="4">
        <a-select
          show-search
          placeholder=""
          option-filter-prop="children"
          :filter-option="filterOption"
          :show-arrow="false"
          style="width: 100%"
          @focus="handleFocus"
          @blur="handleBlur"
          @change="handleChange"
        >
          <a-select-option value="jack"> Jack </a-select-option>
          <a-select-option value="lucy"> Lucy </a-select-option>
          <a-select-option value="tom"> Tom </a-select-option>
        </a-select>
      </a-col>
      <a-col :span="3">
        <a-button type="primary" @click="handlequery">查询</a-button>
      </a-col>
    </a-row>
    <div>
      <a-table
        :columns="columns"
        :data-source="dataList"
        bordered
        :loading="loading"
        size="middle"
        :pagination="pagination"
        :scroll="{ y: 540 }"
      />
    </div>
  </a-modal>
</template>
<script>
export default {
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    loading: {
      type: Boolean,
      default: false,
    },
    columns: {
      type: Array,
      default: () => [],
    },
    dataList: {
      type: Array,
      default: () => [],
    },
    title: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      pagination: false,
    };
  },
  methods: {
    handleChange(value) {},
    handleBlur() {},
    handleFocus() {},
    handleOK() {},
    handleCancel() {
      window.console.log('点击取消')
      this.$emit('handle-cancel')
    },
    handlequery() {},
    filterOption(input, option) {
      return (
        option.componentOptions.children[0].text
          .toLowerCase()
          .indexOf(input.toLowerCase()) >= 0
      );
    }
  },
};
</script>
<style scoped>
.input-sreach {
  margin-bottom: 50px;
}
</style>
